<template>
  <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
    <div class="site-navbar__header">
      <h1 class="site-navbar__brand" @click="$router.push({ path: '/dashboard' })">
        <a class="site-navbar__brand-lg" href="javascript:;">后台管理系统</a>
        <a class="site-navbar__brand-mini" href="javascript:;">后台管理系统</a>
      </h1>
    </div>
    <div class="site-navbar__body clearfix">
      <el-menu class="site-navbar__menu" mode="horizontal">
        <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
          <i class="el-icon-s-fold"></i>
        </el-menu-item>
      </el-menu>
      <el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
        <el-menu-item class="site-navbar__avatar" index="3">
          <el-dropdown :show-timeout="0" placement="bottom" @command="handleCommand">
            <span class="el-dropdown-link">
              {{sysuser}}
              <i class="el-icon-caret-bottom"></i>
              <!-- <img src="~@/assets/images/avatar.png" :alt="userName">{{ userName }} -->
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item> -->
              <el-dropdown-item command="loginout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
  </nav>
</template>
<script>
import store from "../store/store";
import api from "@/api";
export default {
  computed: {
    navbarLayoutType: {
      get() { return this.$store.state.common.navbarLayoutType }
    },
    sidebarFold: {
      get() { return this.$store.state.common.sidebarFold },
      set(val) { this.$store.commit('common/updateSidebarFold', val); } 
    },
    sysuser() {
      let sysuser = sessionStorage.getItem("user");
      return sysuser;
    }
  },
  methods: {
    getDetail(val) {
      api.bundle.getOrderDetail(val).then(res => {
        if ((res.data.code = 200)) {
          this.order = res.data.data;
          this.order.orderStatus = this.statusFormat(this.order.orderStatus);
          this.couponTableData =
            res.data.data.orderSubList[0].orderSubCouponList;
        }
      });
    },
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      if (command == "loginout") {
        this.handleLogout();
      }
      if (command == "clearCache") {
        this.clearCache();
      }
      if (command == "changePassword") {
        this.dialogFormVisible = true;
      }
    },
    handleLogout() {
      var query = {};
      api.login.loginOut({ query }).then(res => {
        store.commit("del_token");
        this.loading = true;
        this.$router.push({ path: "/login" });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.headbar {
  height: 40px;
  padding-top: 15px;
  color: #007acc;
  font-weight: bold;
  font-size: 150%;
}
</style>